<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>物品信息</span>
                </div>
            </template>
            <el-form :model="data.lostFoundItemDetail" label-width="120px">
                <el-form-item label="物品名称">
                    <el-input v-model="data.lostFoundItemDetail.name" disabled/>
                </el-form-item>
                <el-form-item label="物品描述">
                    <el-input v-model="data.lostFoundItemDetail.description" type="textarea" disabled/>
                </el-form-item>
                <el-form-item label="丢失地点">
                    <el-input v-model="data.lostFoundItemDetail.location" disabled/>
                </el-form-item>
                <el-form-item label="发布人">
                    <el-input v-model="data.lostFoundItemDetail.publishNickName" disabled/>
                </el-form-item>
                <el-form-item label="发布学校">
                    <el-input v-model="data.lostFoundItemDetail.publishSchoolName" disabled/>
                </el-form-item>
                <el-form-item label="商品图片" label-width="130px">
                    <div class="demo-image" v-for="image in data.lostFoundItemDetail.images" :key="image">
                        <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                                  :preview-src-list="data.lostFoundItemDetail.images"/>
                    </div>
                </el-form-item>
                <el-form-item label="最近未通过原因" label-width="130px" prop="noPassReason">
                    <el-input v-model="data.lostFoundItemDetail.lastNoPassReason" autocomplete="off" type="textarea" disabled/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>商品审核记录</span>
                </div>
            </template>
            <el-table :data="data.lostFoundItemExamineRecords" style="width: 100%">
                <el-table-column prop="examineAdminName" label="审核员" width="180"/>
                <el-table-column prop="examineAdminName" label="是否通过" width="180">
                    <template #default="scope">
                        <el-tag class="ml-2" type="success" v-if="scope.row.isPass">通过</el-tag>
                        <el-tag class="ml-2" type="danger" v-if="!scope.row.isPass">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="noPassReason" label="未通过原因" width="180"/>
                <el-table-column prop="createTime" label="审核时间"/>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="data.total" @current-change="changeCurrentPage"
                           style="margin: 0 48%"/>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>物品评论</span>
                </div>
            </template>
            <el-table :data="data.lostFoundItemComments" style="width: 100%">
                <el-table-column prop="commentNickName" label="评论人" width="180"/>
                <el-table-column prop="content" label="评论内容" width="180"/>
                <el-table-column prop="createTime" label="评论时间"/>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="data.total" @current-change="changeCurrentPage"
                           style="margin: 0 48%"/>
        </el-card>
    </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";
import {detail} from "@/api/lostFoundItem/lostFoundItem";
import {page} from "@/api/lostFoundItem/lostFoundItemComment";
import {list} from "@/api/lostFoundItem/lostFoundItemExamineRecord";

export default {
    name: "lostFoundItemDetail",
    setup() {
        const data = reactive({
            lostFoundItemDetail: '',
            lostFoundItemComments: [],
            total: 0,
            lostFoundItemExamineRecords: []
        })
        const route = useRoute()
        const lostFoundItemDetail = async () => {
            detail(route.query.uuid).then(res => {
                data.lostFoundItemDetail = res.data
            })
        }
        const searchParam = reactive({
            page: 1,
            size: 10
        })
        const pageLostFoundItemComment = async () => {
            page(route.query.uuid, searchParam).then(res => {
                data.lostFoundItemComments = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 改变页数
         * @param event
         * @returns {Promise<void>}
         */
        const changeCurrentPage = async (value) => {
            searchParam.page = value
            page(route.query.uuid, searchParam).then(res => {
                data.lostFoundItemComments = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 查询物品审核记录
         */
        const listLostFoundItemExamineRecord = () => {
            list(route.query.uuid).then(res => {
                data.lostFoundItemExamineRecords = res.data
            })
        }
        onMounted(() => {
            lostFoundItemDetail()
            pageLostFoundItemComment()
            listLostFoundItemExamineRecord()
        })
        return {
            data,
            changeCurrentPage
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: auto;
}
</style>